<template>
	<view class="container">
		<navbar></navbar>
		<view class="invite-code-box">
			<view class="invate-code">
				<text class="label">我的专属邀请码</text>
				<view>
					<text class="code">{{invite_code}}</text>
					<i class="dy-iconfont icon-copy" @tap.stop.prevent="copyData" :data-content="invite_code"></i>
				</view>
			</view>
			<view class="invate-ewm">
				<canvas class="ewm" id="qrcode" canvas-id="qrcode" ></canvas>
				<!-- <image :src="invite_ewm"></image> -->
			</view>
			<view class="invate-link">
				<text class="label">我的邀请链接</text>
				<view class="link-input">
					<text class="link">{{invite_url}}</text>
					<i class="dy-iconfont icon-copy" @tap.stop.prevent="copyData" :data-content="invite_url"></i>
				</view>
			</view>
		</view>
		<!-- @tap.stop.prevent="goInviteUserRecord" -->
		<view class="invite_box" >
			<view class="my-invite-entry">
				<text class="label">我的邀请</text>
				<text class="content">{{invite_num}}</text>
			</view>
			<view class="title">
				<view class="">
					手机号
				</view>
				<view class="">
					邀请状态
				</view>
			</view>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y"
				@scrolltolower="lower" @scroll="scroll"
				enable-back-to-top>
				<view class="invite-item" v-for="item in list" :key="item.id">
					<view class="mobile">{{item.phone}}</view>
					<view v-if="item.is_open_lianlian" class="real-name">成功</view>
					<view v-else class="pay_money">未开户</view>
				   <!-- <view class="avatar">
					  <image class="image" mode="aspectFill" :src="item.avatarUrl"></image>
					</view> -->
					<!-- <view class="date">{{item.create_time}}</view> -->
				</view>
			</scroll-view>
			<!-- <InviteList />	 -->
		</view>
		
	</view>
</template>

<script>
	const app = getApp();
	import UQRCode from	'@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js'
	// import InviteList from "./list.vue";
	export default {
		// components:{
		// 	InviteList
		// },
		data() {
			return {
				invite_code:'',//邀请码
				invite_ewm:'',//邀请码注册链接二维码
				invite_url:'',//邀请码注册链接链接,
				invite_num:'',//邀请数量
				loading:false,
				hasMore:false,
				list:[],
				scrollTop: 0,
				params:{
				  page:1,
				},
			}
		},
		onShow(){
			this.getInviteData();
			this.getPageData();
		},
		methods: {
			draw(){
				// 获取uQRCode实例
				  var qr = new UQRCode();
				  // 设置二维码内容
				  qr.data = this.invite_url;
				  // 设置二维码大小，必须与canvas设置的宽高一致
				  qr.size = 140;
				  // 调用制作二维码方法
				  qr.make();
				  // 获取canvas上下文
				  var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
				  // 设置uQRCode实例的canvas上下文
				  qr.canvasContext = canvasContext;
				  // 调用绘制方法将二维码图案绘制到canvas上
				  qr.drawCanvas();
			},
			scroll: function(e) {
				// console.log(e)
				this.scrollTop = e.detail.scrollTop
			},
			lower: function(e) {
				if (!this.loading && this.hasMore) {
					this.params.page +=1;
					this.getInviteData();
				}
			},
			// 时间格式化
			getFormatTime(time){
			  if(!time || typeof time !== 'string'){
			    return '';
			  }
			
			  let newTime = '';
			  let nowYear = new Date().getFullYear();
			  let timeYear = Number(time.substr(0,4));
			
			  // 年份小于今年,显示年
			  if(timeYear<nowYear){
			    newTime += timeYear + '年';
			  }
			
			  newTime += time.substr(5,2) + '月';
			  newTime += time.substr(8,2) + '日';
			  return newTime;
			},
			getInviteData(callback){
			  this.loading = true;
			  app._get('inviter/lists', this.params, res => {
			    let {current_page,data,last_page} = res.data;
			    data = data.map(item=>{
			      let user = item.user || {};
			      let newItem = {
			        create_time:this.getFormatTime(item.create_time),
			        avatarUrl:user.avatarUrl || '--',
			        phone:user.phone || '--',
					is_open_lianlian: user.is_open_lianlian,
			        nickName:user.nickName || '--',
			        realName: 0 < user.address_id,
					pay_money: parseInt(user.pay_money)
			      }
			      return newItem;
			    })
			    if(current_page == 1){
			      this.list = data;
			    }else{
			      this.list = [...this.list,...data];
			    }
			    this.params.page = current_page;
			    this.hasMore = last_page>current_page;
			  }, null, () => {
			    uni.hideLoading();
			    this.loading = false;
			    typeof callback === 'function' && callback();
			  });
			},
			// 获取页面数据
			getPageData(){
				app._get('inviter/basic', {}, res => {
					let data = res.data;
					this.invite_code = data.invite_code;
					this.invite_ewm = data.invite_url.replace('httpss','https');
					this.invite_url = window.location.origin + '/#/pages/login/register?invite_code='+data.invite_code;
					this.invite_num = data.invite_num;
					this.draw()
				}, null, () => {
					uni.hideLoading();
				});
			},
			//跳转到我的邀请记录
			goInviteUserRecord(){
				uni.navigateTo({
					url: './list'
				});
			},
			// 复制数据
			copyData: function(e) {
				uni.setClipboardData({
					data: e.currentTarget.dataset.content
				});
			}
		}
	}
</script>

<style>
.container{
	box-sizing: border-box;
	min-height: 100vh;
	padding:536rpx 50rpx 40rpx 50rpx;
	background:  #000 url('https://img.btcys.com/btcys/202304121950378e0538209.png') 40rpx 70rpx no-repeat;
	background-size: 710rpx 512rpx;
}
.invite-code-box{
	margin-bottom: 62rpx;
	padding: 80rpx 38rpx 90rpx 38rpx;
	border-radius: 30rpx;
	background: #fff;
}
.invate-code{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 70rpx;
	padding:0 30rpx;
}
.invate-code .label{
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}
.invate-code .code{
	font-size: 32rpx;
	font-weight: bold;
	color: #DCAC58;
}
.invate-ewm{
	display: flex;
	justify-content: center;
	padding-bottom: 30rpx;
	/* margin:0 auto 64rpx; */
	/* width: 276rpx; */
	/* height: 276rpx; */
	/* background: #f1f1f1; */
}
.invate-ewm .ewm{
	width: 276rpx;
	height: 276rpx;
}
.invate-link{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.invate-link .label{
	flex-shrink: 0;
	margin-right: 40rpx;
	font-size: 26rpx;
	font-weight: 400;
	color: #333;
}
.invate-link .link-input{
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
	flex-grow: 0;
	padding:0 18rpx;
	width: 406rpx;
	height: 48rpx;
	background: #F7F7F9;
	border-radius: 15rpx;
}
.invate-link .link-input .link{
	font-size: 24rpx;
	color: #333;
	flex-grow: 1;
	flex-shrink: 1;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.invate-link .link-input .icon-copy{
	margin-left: 60rpx;
	font-size: 24rpx;
	color: #C2C9D1;
	flex-shrink: 0;
}
.invite-code-box .invate-code .icon-copy{
	margin-left: 25rpx;
	font-size: 28rpx;
	color: #999;
}
.my-invite-entry{
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
    padding:0 55rpx 0 38rpx;
	height: 114rpx;
	background: #fff;
	border-radius: 28rpx 28rpx 0 0;
}
.my-invite-entry .label{
	font-size: 28rpx;
	font-weight: 400;
	color: #333;
}
.my-invite-entry .content{
	font-size: 28rpx;
	font-weight: 400;
	color: #999;
}
/* .my-invite-entry:after{
	content: '\e601'!important;
	font-family: 'dy-iconfont';
	color: #999;
	font-size: 36rpx;
	position: absolute;
	top: 50%;
	right: 20rpx;
	transform: translateY(-50%);
} */
.invite_box{
	background-color: #fff;
	border-radius: 30rpx;
	padding-bottom: 20rpx;
}
.title{
	margin-top: -3rpx;
	background-color: #fff;
	height: 100rpx;
	line-height: 100rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 0 150rpx;
	/* margin: 0 23%; */
}
.invite-item:nth-child(odd){
  // margin-top: 30rpx;
  padding-left: 20%;
  padding-right: 30%;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // padding: 0 30rpx;
  height: 100rpx;
  // border-radius: 20rpx;
  background: #faf9e3;
}
.invite-item:nth-child(even){
  // margin-top: 30rpx;
  padding-left: 20%;
  padding-right: 30%;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // padding: 0 30rpx;
  height: 100rpx;
  // border-radius: 20rpx;
  background: #f4ffed;
}
.invite-item .avatar{
  flex:none;
  margin-right: 28rpx;
  width: 92rpx;
  height: 92rpx;
  border-radius: 6rpx;
  overflow: hidden;
  // background: #F7F7F7;
}
.invite-item .avatar image{
  width: 92rpx;
  height: 92rpx;
}
.invite-item .name-wrapper {
  margin-bottom: 14rpx;
}
.invite-item .name{
  max-width: 250rpx;
  line-height: 1.5;
  font-size: 28rpx;
  font-weight: 400;
  color: $uni-text-color;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.invite-item .real-name {
  background: #ffaa00;
  padding: 2rpx 6rpx;
  width: 80rpx;
  text-align: center;
  /* margin-left: 20rpx; */
  border-radius: 4rpx;
  color: #fff;
  font-size: 18rpx;
}
.invite-item .pay_money {
	width: 80rpx;
	text-align: center;
  background: #1a73e8;
  padding: 2rpx 6rpx;
  margin-left: 20rpx;
  border-radius: 4rpx;
  color: #fff;
  font-size: 18rpx;
}
.invite-item .mobile,
.invite-item .date{
  line-height: 1.5;
  font-size: 22rpx;
  font-weight: 400;
  color: $uni-text-color-grey;
}
.invite-item .date{
  position: absolute;
  top: 35rpx;
  right: 30rpx;
}
.invite-list .loading-text{
  margin:20rpx;
  text-align: center;
  color: $uni-text-color-grey;
  font-size: 22rpx;
}
.invite-list .loading-text.no-data{
  line-height: 90vh;
}
.scroll-Y{
	background-color: #277dff;
	/* margin: 30rpx; */
	border-radius: 20rpx;
	height: 800rpx;
	background-color: #fff;
	/* padding: 10rpx; */
}
</style>

